<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
    <head>
        <meta charset="UTF-8">
        <script th:src="@{/echarts.js}"></script>
        <script th:src="@{/jquery.js}"></script>
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
        <title>分析结果</title>
        <style>
            .form-group {padding-left: 10px}
        </style>
    </head>
    <body style="padding: 30px 30px 30px 30px; background-color: #F5F5FA">
        <div class="row" style="background-color: #fff;margin: 20px;padding: 10px">
            <div class="col-sm-9">
                <form id="form" class="form-inline" role="form">
                    <div class="form-group">
                        <label>文件路径：</label>
                        <input type="text" class="form-control" placeholder="文件全路径" name="fileName" id="fileName"/>
                    </div>
                    <div class="form-group">
                        <label>sheet索引：</label>
                        <input type="text" class="form-control" placeholder="4" name="sheetIndex" id="sheetIndex" value="4"/>
                    </div>
                    <div class="form-group">
                        <label>分组字段：</label>
                        <input type="text" class="form-control" placeholder="8" name="groupField" id = "groupField" value="8"/>
                    </div>
                    <div class="form-group">
                        <label>过滤比例：</label>
                        <input type="text" class="form-control" placeholder="0.8" name="percent" id="percent"/>
                    </div>
                    <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
                        查询
                    </button>
                </form>
                <div class="row" style="margin-top: 20px;margin-left: 10px">
                    <div class="col-xs-8 col-sm-6">
                        <label>总额 ：</label><span id = "totalResult"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="analyseChart" style="height:600px; margin: 20px;background-color: #fff"></div>


        <script type="text/javascript">
            $('#myButton').on('click', function () {
                let $btn = $(this).button('loading')
                let params = {
                    fileName: $("#form").find("input[name='fileName']").val(),
                    sheetIndex: $("#form").find("input[name='sheetIndex']").val(),
                    groupField: $("#form").find("input[name='groupField']").val(),
                    percent: $("#form").find("input[name='percent']").val()
                };
                analyse(params);
                $btn.button('reset');
            })

            // 获取数据
            function analyse(params) {
                $.ajax({
                    url: "/analyse/data",
                    type: "POST",
                    data: JSON.stringify(params),
                    contentType: "application/json",
                    success: function (data) {
                        // 设置总额
                        $("#totalResult").text(data.total);
                        // 图表数据
                        let xAxis = data.xaxis;
                        let yAxis = data.yaxis;
                        let differenceAxis = data.differenceAxis;
                        // 绘制图表
                        chartOptions(xAxis, yAxis, differenceAxis);
                    }
                });
            }

            // 图标配置
            function chartOptions(xAxis, yAxis, differenceAxis) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('analyseChart'));
                let showDataZoom = false;
                let showDataZoomEnd = 100;
                if (xAxis.length > 15) {
                    showDataZoom = true;
                    // 尽量一页展示20个
                    showDataZoomEnd = 15 / xAxis.length * 100;
                }
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: '结果图表'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tar = params[1];
                            return tar.name + ' : ' + tar.value;
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['销量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: [
                        {   type: 'slider',
                            show: showDataZoom,
                            start: 0,
                            end: showDataZoomEnd
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            stack: 'Total',
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            },
                            emphasis: {
                                itemStyle: {
                                    borderColor: 'transparent',
                                    color: 'transparent'
                                }
                            },
                            data: differenceAxis
                        }, {
                            type: 'bar',
                            stack: 'Total',
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{b}'
                            },
                            barWidth: '30%',
                            data: yAxis
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        </script>
    </body>
</html>